<template>
	<view class="w100 flex flex_jc flex_wrap prel body">
		<image mode="widthFix" class="bg" src="../../static/images/bg.png"></image>
		<view class="w100 flex flex_jc flex_wrap pab">
			<view class="top_window w710 flex flex_ac flex_jsb">
				<view @click="gopage('/pages/me/index')" class="user_window flex flex_ac">
					<image mode="widthFix" :src="userinfo.avatar"></image>
					<view class="username ml15 hidden1">{{userinfo.nickname}}</view>
				</view>
			</view>
			<view class="share_box flex w710 mt20">
				<button open-type="share" class="share flex flex_jc flex_ac">
					<u-icon color="#fff" size="70rpx" name="share-square"></u-icon>
					<view class="ml10 sharetxt">点击分享给朋友一起玩</view>
				</button>
			</view>
			<view class="box flex flex_jc prel">
				<view class="b_l flex flex_jc flex_ac flex_wrap">
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="gopage('/pages/qiandao/index')" class="b_l_btn flex flex_jc flex_ac prel flex_wrap">
						<image style="width: 60rpx;" mode="widthFix" src="../../static/images/tubiao/1.png"></image>
						<view class="w100 txt_c fz25">签到</view>
					</button>
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100" 
						@click="gopage('/pages/juji_list/index')" class="b_l_btn flex flex_jc flex_ac prel flex_wrap">
						<image style="width: 60rpx;" mode="widthFix" src="../../static/images/tubiao/2.png"></image>
						<view class="w100 txt_c fz25">奥特剧集</view>
					</button>
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100" 
						@click="gopage('/pages/juchangban_list/index')" class="b_l_btn flex flex_jc flex_ac prel flex_wrap">
						<image style="width: 60rpx;" mode="widthFix" src="../../static/images/tubiao/3.png"></image>
						<view class="w100 txt_c fz25">奥特剧场版</view>
					</button>
				</view>
				<view class="b_m flex flex_jc flex_wrap flex_ac">
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100" 
						@click="gopage('/pages/xiaoxingxing/index')"
						style="background-color: #03a9f4!important;" 
						class="b_m_btn btn_scale flex flex_ac flex_jc">凹特曼消星乐</button>
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"  
						@click="gopage('/pages/chouka/index')"
						style="background-color: #8bc34a!important;" 
						class="b_m_btn flex flex_ac flex_jc">奥特抽卡</button>
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100" 
						@click="gopage('/pages/kapai_list/index')" 
						style="background-color: #e91e63!important;" 
						class="b_m_btn flex flex_ac flex_jc">卡牌集结</button>
				</view>
				<view class="b_r flex flex_jc flex_ac flex_wrap">
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="gopage('/pages/zhuanpan/index')" class="b_r_btn flex flex_jc flex_ac prel flex_wrap">
						<image style="width: 60rpx;" mode="widthFix" src="../../static/images/tubiao/4.png"></image>
						<view class="w100 txt_c fz25">奥特转盘</view>
					</button>
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="gopage('/pages/tujian_list/index')" class="b_r_btn flex flex_jc flex_ac prel flex_wrap">
						<image style="width: 60rpx;" mode="widthFix" src="../../static/images/tubiao/5.png"></image>
						<view class="w100 txt_c fz25">奥特图鉴</view>
					</button>
					<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="gopage('/pages/theme/index?id=489')" class="b_r_btn flex flex_jc flex_ac prel flex_wrap">
						<image style="width: 60rpx;" mode="widthFix" src="../../static/images/tubiao/6.png"></image>
						<view class="w100 txt_c fz25">奥特表情包</view>
					</button>
				</view>
			</view>
			<view class="w100 mt20" v-show="show_ad">
				<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white" v-show="show_ad"></ad>
			</view>
			
			<view class="w100 mt20" v-show="show_ad">
				<ad :unit-id="xcx_ad.banner" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
			</view>
			
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				name:[],
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				userinfo:[]
            }
        },
		
	
		onShareAppMessage(e) {
		},
		onShareTimeline(e) {
		},
		onShow(){
			this.userinfo = uni.getStorageSync('userinfo')
		},
		onLoad(options){
		},
		methods: {
			
			adLoad() {
			    console.log('Banner 广告加载成功')
			},
			adError(err) {
			    console.error('Banner 广告加载失败', err)
			},
			adClose() {
			    console.log('Banner 广告关闭')
			},
			
			
			gopage(path){
				uni.navigateTo({
					url: path,
				})
			},
			
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
		}
    }
</script>
<style>
	page{background-color: #333333;}
</style>
<style lang="scss">
	.body{min-height: 100vh;}
	.sharetxt{font-weight: bold;font-style: italic;padding-right: 17rpx;font-size: 40rpx;}
	.share{height: 100%;border: 1px solid #fff;color: #fff;padding: 0 10rpx 0 5rpx;
		border-radius: 50rpx!important;background-color: transparent;}
	.share_box{height: 80rpx;}
	
	.user_window .username{font-size: 35rpx;color: #FFF;font-weight: bold;max-width: 550rpx;}
	.user_window image{width: 100rpx;border-radius: 100%;}
	.user_window{height: 100rpx;}
	.top_window{height: 100rpx;z-index: 2;margin-top: 50rpx;}
	.b_m_btn{width: 350rpx;height: 100rpx;background-color: black!important;
		box-shadow: 5px	5px 10px rgba(0, 0,0, 0.5);
		border-radius: 60rpx!important;overflow: hidden;color: #FFF!important;}
	.box .b_m{width: 450rpx;height: 100%;color: #FFF;font-size: 40rpx;font-weight: bold;}
	.b_r_btn{width: 150rpx;height: 150rpx;color: #FFF;}
	.box .b_r{width: 150rpx;height: 100%;}
	.b_l_btn{width: 150rpx;height: 150rpx;color: #FFF;}
	.box .b_l{width: 150rpx;height: 100%;}
	.box{width: 100%;height: 500rpx;z-index: 2;color: #FFF;}
	.bg{width: 750rpx;position: absolute;top: 0%;left: 0;}
	.btn_scale {animation: btnScale 1s infinite;}
	
	@keyframes btnScale {
	  0% {
	    transform: scale(1);
	  }
	  50% {
	    transform: scale(1.1);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
	
	
	button::after{
	 	border: none;
	}
	button{
		border-radius: 0!important;
		margin: 0;
		padding: 0;
		position: relative;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: inherit;
		background-color: transparent!important;
	}
	
</style>